<template>
    <div class="project">
        <search :searchKey.sync="filter.project_name" 
                enterButton="搜索项目"
                placeholder="输入你感兴趣的项目名或关键字"
                @search="search()"/>
        <div class="project-container">
            <Tabs :animated="false" class="tabs animated fadeIn" v-model="tabIndex" @on-click="tabSelect">
                <TabPane label="国家社会科学基金项目" name="0"></TabPane>
                <TabPane label="教育部人文社科项目" name="1"></TabPane>
                <TabPane label="国家自然科学基金项目（F0701）" name="2"></TabPane>
                <TabPane label="美国国家科学基金项目" name="3"></TabPane> 
            </Tabs>
            <div class="chart-container" :style="tabIndex=='2'?'margin-bottom:0px':''" v-if="tabIndex!='3'">
                <!-- <h2 class="project-title">- 项目数据可视化 -</h2> -->
                <div class="mychart">
                    <div class="left-foot"><Icon type="md-pulse" size="18" /> 依托单位分布</div>
                    <!-- 项目依托单位分布图表 -->
                    <p-chart-ytdwfb0 v-if="tabIndex=='0'" />
                    <p-chart-ytdwfb1 v-if="tabIndex=='1'" />
                    <p-chart-ytdwfb2 v-if="tabIndex=='2'" />
                </div>
            </div>
            <div class="chart-list" v-if="tabIndex=='2'">
                <div>
                    <chart-container  title="申请、资助情况" style="margin-bottom:0;height:500px">
                        <p-chart-sqzzqk chartId="sqzzqk" type="F0701" />
                    </chart-container>
                    <chart-container  title="不同研究方向资助率" style="margin-bottom:0;height:500px">
                        <p-chart-btyjfxzzl chartId="btyjfxzzl" type="F0701" />
                    </chart-container>
                </div>
                <div>
                    <chart-container  title="资助类别分布" style="margin-bottom:0;height:500px">
                        <p-chart-zzlbfb chartId="zzlbfb" type="F0701" />
                    </chart-container>
                    <chart-container  title="资助金额分布" style="margin-bottom:0;height:500px">
                        <p-chart-zzjefb chartId="zzjefb" type="F0701" />
                    </chart-container>
                </div>
            </div>
        </div>
        
        <div v-if="tabIndex=='3'" class="mggjkxjjxm">
            <chart-container  title="两学部项目数和经费额情况分析" style="margin-bottom:0;">
                <p-chart-lxbxmshjfeqkfx chartId="lxbxmshjfeqkfx" />
            </chart-container>
            <chart-container  title="近10年资助热点演变情况" style="margin-bottom:0;">
                <p-chart-j10nzzrdybqk chartId="j10nzzrdybqk" />
            </chart-container>
        </div>

        <div class="project-content" v-if="tabIndex!='3'">
            <div class="project-search">
                <h2 class="project-title">- 项目高级检索 -</h2>
                <span>项目名称：<Input prefix="md-barcode" placeholder="项目名" style="width: 140px" v-model="filter.project_name" /></span>
                <span>
                    批准年份：
                    <Select prefix="md-time" v-model="filter.approval_year" style="width:140px;white-space:nowrap;overflow:hidde" placeholder="全部批准年份">
                        <Option v-for="item in yearList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </span>
                <span>
                    项目类型：
                    <Select prefix="md-reorder" v-model="filter.project_type" style="width:140px;white-space:nowrap;overflow:hidde" placeholder="全部项目类型">
                        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </span>
                <span>依托单位：<Input prefix="md-apps" placeholder="依托单位" style="width: 140px" v-model="filter.college_name" /></span>
                <span>负责人：<Input prefix="ios-contact" placeholder="负责人" style="width: 140px" v-model="filter.project_leader"/></span>
                <div class="mutiple-search">
                    关键词：
                    <Select v-model="keyword_select" multiple  style="width:auto;margin-right:10px" placeholder="未选关键词">
                        <Option v-for="item in keyword_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <Input prefix="md-barcode" placeholder="添加关键词" style="width: 140px;margin-right:10px" v-model="keyword" />
                    <div class="submit">
                        <Button type="primary" style="margin-right:10px" @click="addKeyword()">添加</Button>
                        <Button type="success" style="margin-right:10px"  id="page-content" @click="search()">查询项目</Button>
                        <span class="keyword-msg">{{msg}}</span>
                    </div>
                </div>
            </div>
            <div class="project-section">
                <div class="section-left">
                    <div class="title" style="margin-top:50px">
                        <Icon type="md-apps" size="30" color="#666"></Icon><h3 style="margin-left:10px">
                            项目总览
                            <span style="color:#888;font-weight:normal;margin-left:10px;font-size:15px;margin-right:5px"> > {{tabName[tabIndex]}}</span>
                            <span style="color:#888;font-weight:normal;font-size:15px" v-if="searchKey"> > {{searchKey}}</span>
                        </h3>
                        <div class="draw" @click="showDrawer()"><Icon type="md-exit" size="30" color="#bbb" class="drawer-icon" style="vertical-align:middle" /></div>
                    </div>
                    <Divider style="margin-top:15px;margin-bottom:10px" />
                    <!-- 骨架屏 -->
                    <el-skeleton animated :loading="loading">
                        <template slot="template">
                        <div class="paper-list"  v-for="(item,index) in 5" :key="index">
                            <div>
                                <el-skeleton-item variant="text" style="height:30px"  />
                                <el-skeleton-item variant="text" style="width:70%"/>
                                <el-skeleton-item variant="text" style="height:50px;width:70%" />
                                <el-skeleton-item variant="text" style="width:70%"/>
                            </div>
                            <Divider style="margin-top:15px;background-color:#ccc"  />
                        </div>
                        </template>
                    </el-skeleton>
                    <div v-if="!totalPages&&!loading" style="text-align:center" class="animated fadeInUp">
                        <img src="../assets/noresult.svg" alt="" width="200px" height="175px">
                        <br>
                        <span style="margin-right:0;margin-top:20px;font-size:18px">暂时没有结果，换一些关键词试试吧~</span>
                    </div>
                    <div class="project-list" v-for="item in pageInfo" v-if="item.project_name"  :key="item.id">
                        <div class="left-title" v-html="highlightHTML(item.project_name,searchKey)"></div> <span class="highmark">{{item.project_type}}</span>
                        <div style="margin-top:15px"><span><Icon type="ios-contact" size="18" /> 项目负责人：{{item.project_leader}}</span> <span><Icon type=" ivu-icon-ios-home" size="18" /> 单位：{{item.college_name}}</span></div>
                        <div><span><Icon type="logo-buffer" size="18" /> 项目编号：{{item.project_no}}</span> <span><Icon type="md-time" size="18" /> 批准年份：{{item.approval_year}}</span></div>
                        <Divider style="margin-top:15px;" />
                    </div>
                </div>
                <div class="section-right" :class="show&&'animated fadeInRight'" @click="hiddenDrawer()" :style="show&&'visibility:visible'">
                    <div class="title" style="margin-top:50px">
                        <Icon type="md-apps" size="30" color="#666"></Icon><h3 style="margin-left:10px">项目相关数据可视化</h3>
                    </div>
                    <Divider style="margin-top:15px;" />
                    <div class="word-container">
                        <div class="word-title"><Icon type="md-medal" size="20" /> 项目热门关键词词云</div>
                        <wordcloud
                            class="wordcloud"
                            :data="defaultWords"
                            nameKey="name"
                            valueKey="value"
                            spiral="rectangular"
                            :color="myColors"
                            fontScale="n"
                            :drawOutOfBound="true"
                            :fontSize="[20,30]"
                            :showTooltip="false">
                        </wordcloud>
                    </div>
                    <chart-container title="项目类型分布" v-if="tabIndex=='0'">
                        <p-chart-xmlxfb />
                    </chart-container>
                    <chart-container title="项目类别时间分析" v-if="tabIndex=='1'">
                        <p-chart-xmlbsjfx chart-id="xmlbsjfx" />
                    </chart-container>
                    <chart-container title="资助地区分布" v-if="tabIndex=='2'">
                        <p-chart-zzdqfb chart-id="zzdqfb" type="F0701" />
                    </chart-container>
                    
                    
                </div>
            </div>
            <Page class="pages" :total="totalPages"  :current="pageNumber"  :page-size="7" @on-change="getPageInfo"/>
        </div>
    </div>
</template>

<script>
import service from '../service/projects';
import utils from "../utils/utils"
import wordcloud from 'vue-wordcloud';
import search from '../components/topSearch.vue';
import chartContainer from '../components/chartContainer.vue'
import pChartXmlxfb from '../components/chart/project/xmlxfb.vue';
import pChartXmlbsjfx from '../components/chart/project/xmlbsjfx.vue';
import pChartYtdwfb0 from '../components/chart/project/ytdwfb0.vue';
import pChartYtdwfb1 from '../components/chart/project/ytdwfb1.vue';
import pChartYtdwfb2 from '../components/chart/project/ytdwfb2.vue';
import pChartZzdqfb from '../components/chart/project/zzdqfb.vue';
import pChartSqzzqk from '../components/chart/project/sqzzqk.vue';
import pChartBtyjfxzzl from '../components/chart/project/btyjfxzzl.vue';
import pChartZzlbfb from '../components/chart/project/zzlbfb.vue';
import pChartZzjefb from '../components/chart/project/zzjefb.vue';
import pChartLxbxmshjfeqkfx from '../components/chart/project/lxbxmshjfeqkfx.vue';
import pChartJ10nzzrdybqk from '../components/chart/project/j10nzzrdybqk.vue';
export default {
    components: {
        'chart-container':chartContainer,
        'wordcloud':wordcloud,
        'search':search,
        'p-chart-xmlxfb':pChartXmlxfb,
        'p-chart-xmlbsjfx':pChartXmlbsjfx,
        'p-chart-ytdwfb0':pChartYtdwfb0,
        'p-chart-ytdwfb1':pChartYtdwfb1,
        'p-chart-ytdwfb2':pChartYtdwfb2,
        'p-chart-zzdqfb':pChartZzdqfb,
        'p-chart-sqzzqk':pChartSqzzqk,
        'p-chart-btyjfxzzl':pChartBtyjfxzzl,
        'p-chart-zzlbfb':pChartZzlbfb,
        'p-chart-zzjefb':pChartZzjefb,
        'p-chart-lxbxmshjfeqkfx':pChartLxbxmshjfeqkfx,
        'p-chart-j10nzzrdybqk':pChartJ10nzzrdybqk,

    },
    data(){
        return{
            myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
            loading:true,
            tabName:['国家社会科学基金项目','教育部人文社科项目','国家自然科学基金项目（F0701）','美国国家科学基金项目'],
            tabIndex:"0", //导航栏index
            show:false, 
            msg:'', //高级搜索提示信息
            keyword:'', //高级搜索关键词
            keyword_select:[], //高级搜索已选中关键词列表
            keyword_list:[], 
            defaultWords: [],
            type:'NSSFC_PG', //当前项目类型，向图表组件传递的参数
            pageInfo:[], //当前页面的项目数据列表
            typeList:[], //对应导航栏项目类别下的类型下拉列表
            yearList:[], //对应导航栏项目类别下的年份下拉列表
            totalPages:0, //总页码
            pageNumber:1, //当前页码
            filter:{
                project_name:'', //项目名搜索 含顶部搜索栏
                approval_year:null, //项目批准年份搜索
                project_type:'', //项目类型搜索
                college_name:'', //项目依托单位搜索
                project_leader:'' //项目负责人搜索
            }, //高级检索 过滤条件
            searchKey:'' //搜索键值
        }
    },
    computed:{
        dataSetId(){
            let arr = [1061,1058,1060,[1071,1072,1073]];
            return arr[this.tabIndex]
        }
    },
    created(){
        this.$route.params.searchKey&&(this.searchKey=this.$route.params.searchKey)&&(this.filter.project_name=this.$route.params.searchKey);

        this.$Loading.finish();
        this.getYears();
        this.getTypes();
        service.getDatas({
                pageSize:7,
                pageNumber:this.pageNumber,
                filter:[['project_name',6,this.searchKey]]
                // order: ['approval_year', 0]
            },this.dataSetId)
            .then((res)=>{
            this.pageInfo = res.data;
            this.totalPages = res.total;
            this.loading = false;
        });
    },
    mounted(){
        //项目热门关键词词云构建
        this.loadKeywordData();
    },
    methods:{
        addKeyword(){
            if(!this.keyword){
                this.msg = '关键词不能为空！';
                return;
            }else{
                if(this.keyword_select.length>=5){
                    this.msg = '关键词数量已达上限！';
                    return;
                }
                let value = this.keyword_list.length==0?0:this.keyword_list.length;
                this.keyword_list.push({
                    value:value,
                    label:this.keyword
                });
                this.keyword_select.push(value);
                this.keyword = '';
                this.msg = '';
            }
        },
        showDrawer(){
            this.show = true;
            document.body.style.overflow = 'hidden';
        },
        hiddenDrawer(){
            this.show = false;
            document.body.style.overflow = 'scroll';
        },
        //加载关键词词云数据
        loadKeywordData(){
            let option = {
                type: this.type,
                topN: 100,
            };
            service.getKeywords(option).then((res) => {
                this.defaultWords = res.data.map((item) => {
                return {
                        name: item[0],
                        value: item[1],
                    };
                });
            });
        },
        //切换导航栏
        tabSelect(currentIndex){

            if(currentIndex == 0){
                //关键词词云切换数据
                this.type = "NSSFC_PG";
                this.loadKeywordData();
            }

            if(currentIndex == 1){
                //关键词词云切换数据
                this.type = "NSSFC_MOE";
                this.loadKeywordData();
            }
            
            
            if(currentIndex == 2){
                //关键词词云切换数据
                this.type = "NSFC_0701";
                this.loadKeywordData();
            }
            
            if(currentIndex == 3){
                return;
            }

            //重置数据
            this.pageNumber = 1;
            this.filter.approval_year = "";
            this.filter.project_type = "";

            this.search(true);
            this.getYears();
            this.getTypes();


        },
        //搜索 含顶部搜索和高级搜索
        search(flag){
            this.loading = true;
            //美国国家科学基金项目不支持搜索
            if(this.tabIndex=='3') return;
            //视图跳转到搜索结果页面,tab切换不跳转
            !flag&&document.querySelector("#page-content").scrollIntoView(true);
            
            this.pageNumber = 1;
            this.searchKey = this.filter.project_name;
            this.pageInfo = [];
            let option = {
                filter:this.getNomalFilter(),
                // order: ['approval_year', 1],
                pageSize:7,
                pageNumber:this.pageNumber
            };
            service.getDatas(option,this.dataSetId).then((res)=>{
                console.log(this.pageInfo);
                setTimeout(() => {
                    this.loading = false;
                    this.pageInfo = res.data;
                    this.totalPages = res.total;
                }, 700);
            })
        },
        //分页
        getPageInfo(currentPage){
            //视图跳转到搜索结果页面
            document.querySelector("#page-content").scrollIntoView(true);

            this.pageNumber = currentPage;
            console.log(currentPage)
            this.loading = true;
            this.pageInfo = [];
            let option = {
                filter:this.getNomalFilter(),
                // order: ['approval_year', 1],
                pageSize:7,
                pageNumber:this.pageNumber
            };
            service.getDatas(option,this.dataSetId).then((res)=>{
                setTimeout(() => {
                    this.pageInfo = res.data;
                    this.totalPages = res.total;
                    this.loading = false;
                    console.log("pageInfo",this.pageInfo);
                }, 700);
            });
        },
        //对应导航栏项目类别下的年份下拉列表
        getYears() {
            const dataId = this.dataSetId
            const key = dataId == 1071 ? 'GrantedYear' : 'approval_year'
            let option = {
                columns: [`distinct:${key}`],
                pageSize: 0,
                order: [[key, 1]],
                filter: [],
            };
            service.getDatas(option, this.dataSetId).then((res) => {
                console.log(res)
                const yearDataSet = new Set();
                res.data.forEach((item) => {
                item[`_distinct_${key}`] &&
                    yearDataSet.add(item[`_distinct_${key}`] * 1);
                });
                // yearDataSet.add(2020)
                const yearDataArr = Array.from(yearDataSet).sort((a, b) => b * 1 - a * 1);
                this.yearList = [
                {
                    label: "全部批准年份",
                    value: "",
                },
                ...yearDataArr.map((item) => ({
                    label: item,
                    value: item,
                })),
                ];
            });
        },
        //对应导航栏项目类别下的类型下拉列表
        getTypes() {
            const dataId = this.dataSetId;
            const key = dataId == 1071 ? 'AwardInstrument' : 'project_type';
            let option = {
                columns: [`distinct:${key}`],
                pageSize: 0,
                order: [[key, 1]],
                filter: [],
            };
            service.getDatas(option, this.dataSetId).then((res) => {
                const yearDataSet = new Set();
                res.data.forEach((item) => {
                item[`_distinct_${key}`] &&
                    yearDataSet.add(item[`_distinct_${key}`]);
                });
                const yearDataArr = Array.from(yearDataSet);
                this.typeList = [
                {
                    label: "全部项目类型",
                    value: "",
                },
                ...yearDataArr.map((item) => ({
                    label: item,
                    value: item,
                })),
                ];
            });
        },
        //将filter处理成标准的后端过滤filter请求格式
        getNomalFilter(){
            let filter = [];
            for(let key in this.filter){
                let arr = [];
                if(this.filter[key]){
                    arr.push(key);
                    arr.push(key == 'approval_year' ||  key == 'project_type' ? 0 : 6);
                    arr.push(this.filter[key]);
                    filter.push(arr);
                }
            }
            for(let item of this.keyword_select){
                let arr = ["keyword",6,this.keyword_list[item].label]
                filter.push(arr);
            }
            return filter;
        },
        //搜索结果高亮
        highlightHTML(html,search_key){
            return utils.highlightHTML(html,search_key)
        }
    },
}
</script>

<style lang="scss" scoped>
.mggjkxjjxm{
    background: #fcfcfc;
    padding-left: 10%;
    padding-right: 10%;
    overflow: hidden;
    padding-bottom: 20px;
}
.chart-list{
    padding-bottom: 150px;
    >div{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        >div:nth-of-type(1){
            margin-right: 20px;
        }
    }
}


.search-div{
    padding-bottom: 100px;
}

.pages{
    margin-top: 20px;
}
.project{
    .project-container{
        overflow: hidden;
        padding: 0px 8%;
        background: rgb(252,252,252);
        /deep/ .ivu-tabs-nav{
            // width: 100%; 
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px 0px;
            font-size: 16px;
            color: #aaa;
        }
        /deep/ .ivu-tabs-ink-bar{
            height: 3px;
        }
        /deep/ .ivu-tabs-nav .ivu-tabs-tab-active{
            color: #333;
        }
        /deep/ .ivu-tabs-nav .ivu-tabs-tab:hover{
            color: #333;
        }
        /deep/ .ivu-tabs-nav-next,
        /deep/ .ivu-tabs-nav-prev{
            margin-top: 18px;
        }
        .chart-container{
        width: 100%;
        height: 550px;
        background: white;
        margin-top: 20px;
        margin-left: 0%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-bottom: 180px;
        position: relative;
        box-shadow: 1px 1.732px 10px 0px rgba(0, 0, 0, 0.1);
        .mychart{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 0;
            .left-foot{
                position: absolute;
                left: 0;
                bottom: 0;
                padding: 15px 22px;
                background: var(--single-color);
                color: white;
                font-weight: bold;
                border-top-right-radius: 10px;
                border-bottom: 3px solid #eee;
                border-left: 3px solid #eee;
                box-shadow: 0 0 10px 0px #b6b6b6;
                z-index: 999;
            }
            /deep/ .ivu-carousel-dots-inside{
                display: none;
            }
        }
        
    }
    }
    .project-content{
        padding: 20px 8%;
        position: relative;
        background: #fff;
        .project-title {
            background: var(--single-color);
            box-shadow: 0 0 8px 0px #b6b6b6;
            position: absolute;
            color: white;
            margin-top: 20px;
            font-weight: normal;
            font-size: 15px;
            margin: auto;
            padding: 10px 35px;
            border-radius: 5px;
            font-weight: bold;
            transform: translateY(-35px) translateX(-50%);
            top: -90px;
            z-index: 12;
            border-bottom: 5px solid #eee;
            text-align: center;
            display: inline-block;
            left: 50%;
        }
        .submit{
            display: inline-block;
        }
        .title{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 30px !important;
            overflow: hidden;
            margin-right: 40px;
            white-space: nowrap;
            .draw{
                position: absolute;
                right: 4vw;
                display: none;
                span{
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 15px;
                }
            }
        }
        .project-search{
            text-align: left;
            margin-bottom: 0px;
            // border:2px solid black;
            padding: 40px 40px;
            margin-top: -120px;
            background: white;
            box-shadow: 0 0 10px 0px #bebebe96;
            border-radius: 5px;
            width: auto;
            .mutiple-search{
                margin-top: 10px;
                line-height: 45px;
            }
            >span{
                display: inline-block;
                margin-top: 10px;
                margin-right: 14px;
            }
            .keyword-msg{
                font-size: 13px;
                color: tomato;
                display: inline-block;
            }
        }
        .project-section{
            display: flex;
            flex-direction: row;
            .section-left{
                text-align: left;
                width: 64%;
                .project-list>div{
                    margin-bottom: 10px;
                    color: #888;
                }
                .project-list>div:nth-of-type(2){
                    color: orange;
                }
                .project-list>div:nth-last-of-type(2){
                    margin-bottom: 30px;
                }
                .title{
                    color:#2c3e50
                }
                span{
                    margin-right: 30px;
                    display: inline-block;
                }
                .left-title{
                    font-size: 18px;
                    font-weight: bold;
                    color: #4eadca !important;
                    margin-bottom: 0px !important;
                    margin-top: 10px;
                    display: inline-block;
                }
                .highmark{
                    display: inline-block;
                    font-size: 12px;
                    font-weight: normal;
                    border: 1px solid rgba(219, 219, 219, 0.5);
                    color: white;
                    font-weight: 500;
                    background: var(--single-color);
                    padding: 4px 10px;
                    vertical-align: middle;
                    border-radius: 3px;
                    cursor: pointer;
                    transform: translateY(-2px);
                }
                .highmark::after {
                    content: '';
                    display: inline-block;
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    // background: url(../assets/flash.gif) no-repeat center;
                    background-size: contain;
                    opacity: 0.6;
                    top: 0;
                }
            }
            .section-right{
                width: 34%;
                margin-left: 2%;
                .word-title{
                    background: var(--single-color);
                    color: white;
                    font-weight: bold;
                    padding: 15px 22px;
                    font-size: 16px;
                    text-align: left;
                }
                .right-chart{
                    border-radius: 5px;
                    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
                    margin-top: 30px;
                    overflow: hidden;
                    padding-bottom: 20px;
                    .chart2{
                        position: relative;
                        height: 350px !important;
                        width: 100%;
                        // padding-left: 30px;
                    }
                    .chart2-title{
                        background: var(--single-color);
                        color: white;
                        font-weight: bold;
                        padding: 15px 22px;
                        font-size: 16px;
                        text-align: left;
                    }
                }
                
            }
        }
    }
}
.word-container{
  position: relative;
  border-radius: 5px;
  background: white;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  // background: linear-gradient(-150deg,#24695f,#495a86);
  // background-image: url(../assets/bg.jpg);
  // background-size: 100% 100%;
  min-width: 45%;
  margin-top: 20px;
  z-index: 1;
  .title{
    background: var(--single-color);
    border-radius: 3px;
    position: absolute;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    // border: 1px solid white;
    z-index: 99;
    top: -30px;
    left: 50%;
    transform: translateX(-50%) translateY(-35px);
    color: white;
    font-size: 14px;
    border-bottom: 4px solid #ddd;
    font-weight: bold;
    // box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
    white-space:nowrap;
  } 
}
.wordcloud{
  background-size: 100% 100%;
  /dee/ .chart{
    width: 100%;
  }
  /deep/ text{
    cursor: pointer !important;
    transition: text-shadow 0.2s ease;
  }
  /deep/ text:hover{
    font-size: 20px;
    text-shadow: 0 1px 1px rgba(59, 59, 59, 0.767);
  }
}

@media (max-width:1060px) {
.mggjkxjjxm{
    padding: 0;
}
.chart-list{
    padding-bottom: 20px;
    >div{
        display: flex;
        width: 98%;
        margin-left: 1%;
        flex-direction: column;
        justify-content: space-between;
        >div:nth-of-type(1){
            margin-right: 20px;
        }
    }
}

.project{
    .draw{
        display: block !important;
    }
    .project-container{
        width: 100%;
        padding: 0 0;
        /deep/ .ivu-tabs-nav-prev,
        /deep/ .ivu-tabs-nav-next{
            margin-top: 12px;
        }
        /deep/ .ivu-tabs-nav{
            left: 0 !important;
        }
        /deep/ .ivu-tabs-nav{
            padding: 10px 0;
            font-size: 14px;
        }
        .chart-container{
        width: 100%;
        margin-left: 0%;
        height: 450px;
        margin-bottom: 10px;
        }
    }
    .project-content{
        padding: 20px 4%;
        .project-search{
            margin-top: 20px;
        }
        .project-title{
            top: 45px;
            margin-top: 0;
        }
        .project-section{
            .section-right{
                visibility: hidden;
                position: fixed;
                top: 0;
                left: 0;
                margin-left: 0;
                width: 100vw;
                height: 100%;
                overflow: scroll;
                background: white;
                padding: 0;
                z-index: 99999;
                padding: 0px 15px;
                padding-bottom: 20px;
                .word-container{
                    margin-top: 0;
                    .title{
                        margin-top: 30px !important;
                    }
                }
                .title{
                    margin-top: 20px !important;
                }
            }
            .section-left{
                width: 100%;
            }
        }
    }
}
}

</style>